<template>
  <!-- 放置弹层组件 -->
  <el-dialog :close-on-click-modal="false" :title="title" :visible="showDialog" @close="closeDialog">
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <!-- 四要素：rules\model\prop\v-model -->
    <el-form ref="form" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
          <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <template #footer>
      <div>
        <el-button type="primary" size="small" @click="confirmAdd">确定</el-button>
        <el-button size="small" @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { getDepartmentManagerListApi, addDepartmentApi, getDepartmentDetailApi, editDepartmentApi } from '@/api/departments'
export default {
  // 需要传入一个props变量来控制 显示或者隐藏
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    // 父组件传递的部门数据
    nodeData: {
      type: Object,
      default: () => ({})
    },
    // 平铺的所有树状结构数组
    departsList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      form: {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      },
      // 管理人员列表
      managerList: [],
      // 定义校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: ['blur', 'change'] },
          { validator: this.checkNameRepeat, trigger: ['blur'] }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: ['blur', 'change'] },
          { validator: this.checkCodeRepeat, trigger: ['blur'] }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: ['blur', 'change'] }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: ['blur', 'change'] }
        ]
      },
      originForm: {}
    }
  },
  computed: {
    title() {
      return this.form.id ? '修改属性' : '添加属性'
    }
  },
  methods: {
    closeDialog() {
      // .sync语法
      this.$emit('update:showDialog', false)
      // 清空表单，reset只能清空表单域里绑定的数据，id清不掉
      this.form.id = ''
      this.$refs.form.resetFields()
    },
    openDialog() {
      this.getDepartmentManagerList()
    },
    /**
     * 校验部门名字是否重复(rules,val,callback)
     */
    checkNameRepeat(rules, val, callback) {
      if (this.form.id) {
        // 存在id为修改部门,不能与兄弟部门名字重复
        // 可以与自己的名字重复
        if (val === this.originForm.name) {
          callback()
        } else {
          // 过滤一个兄弟部门
          const parentArr = this.departsList.filter((item) => {
            return this.form.pid === item.pid
          })
          // 判断名字是否在兄弟部门内
          const flag = parentArr.some((item) => {
            return item.name === this.form.name
          })
          if (flag) {
            callback('请输入不重复的部门名')
            return
          } else {
            callback()
          }
        }
      } else {
        // 不存在id时为添加部门
        const children = this.nodeData.children
        const flag = children.some((item) => item.name === val)
        // 如果flag为true，标明输入的name在部门列表中，就报错
        if (flag) {
          callback('请输入不重复的部门名')
          return
        }
        callback()
      }
    },
    /**
     * 校验部门编码是否重复
     */
    checkCodeRepeat(rules, val, callback) {
      if (this.form.id && val === this.originForm.code) {
        // 如果有id，为修改部门，并且code未修改
        callback()
      } else {
        const flag = this.departsList.some((item) => item.code === val)
        // 如果flag为true，标明输入的name在部门列表中，就报错
        if (flag) {
          callback('请输入不重复的部门编码')
          return
        }
        callback()
      }
    },
    /**
     * 得到部门管理人列表
     */
    async getDepartmentManagerList() {
      const res = await getDepartmentManagerListApi()
      this.managerList = res.data
      // console.log(res.data)
    },
    confirmAdd() {
      this.$refs.form.validate(async(flag) => {
        if (!flag) return
        // 如果form有id，说明是修改部门
        if (this.form.id) {
          this.editDepartment(this.form)
        } else {
          this.form.pid = this.nodeData.id
          console.log(this.form, '添加部门form成功')
          // await addDepartmentApi(this.form)

          this.$message.success('添加成功')
          // 返回父组件，重新获取列表数据
        }
        this.closeDialog()
        this.$emit('addSuccess')
      })
    },
    /**
     * 修改部门详情时回显的数据
     * @param id 部门id
     */
    async getDepartmentDetail(id) {
      const res = await getDepartmentDetailApi(id)
      this.form = res.data
      // 额外保存一份form数据
      this.originForm = JSON.parse(JSON.stringify(res.data))
    },
    editDepartment(data) {
      console.log(data, '修改成功')
      // const res = await editDepartmentApi(data)
    }
  }
}
</script>
